<template>
  <view >
    <swiper class="base-swiper-item">
      <swiper-item v-for="vals in items">
        <uni-grid :column="column" :show-border="false">
          <uni-grid-item v-for="(item, index) in vals" :key="index" :index="index" class="grid-item">
            <view class="grid-item-box">
              <slot :item="item"/>
            </view>
			
          </uni-grid-item>
        </uni-grid>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    list: {type: [Array, Object], default: () => []},
    column: {type: Number, default: 4}
  },
  data() {
    return {
      items: []
    };
  },
  watch: {
    list: {
      immediate: true,
      handler(nv) {
        if (Array.isArray(nv)) {
          this.arrItems(nv);
        } else {
          this.objItems(nv);
        }
      }
    }
  },
  methods: {
    objItems(obj = {}) {
      this.setItems(Object.keys(obj)
          .map(key => ({key, value: obj[key]})))
    },
    arrItems(arr = []) {
      this.setItems(arr);
    },
    setItems(arr = []) {
      const {column: size} = this;
      const {length} = arr;
      this.items = Array.from(
          {length: Math.ceil(length / size)},
          (_, index) => arr.slice(index * size, index * size + size)
      )
    }
  }
}
</script>

<style lang="scss">
.base-swiper-item {
  background-color: #f7f7f7;
  display: grid;
  height: 125rpx;
  margin-top: 14rpx;
  border-radius: 10rpx;

  .grid-item {
    .grid-item-box {
      flex: 1;
      text-align: center;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      height: 100%;
    }
  }
}


</style>
